import React, { useEffect, useState } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
interface listType {
    title: string,
    pic: number,
    date: string,
    id: string,
    children: childType[]
}
interface childType{
    color:string
}
const Home: React.FC = () => {
    const navigate = useNavigate()
    const [list, getList] = useState<listType[]>([])
    const listNav = () => {
        navigate('/list')
    }
    const userNav = () => {
        navigate('/user')
    }
    const getAxiosList = async () => {
        const resp = await axios.get('/api/list')
        getList(resp.data.list)
    }
    useEffect(() => {
        getAxiosList()
    }, [])
    return (
        <div className='home'>
            <div className="nav">
                <div onClick={() => listNav()}>全部颜色</div>
                <div onClick={() => userNav()}>全部车系</div>
            </div>
            <div className="footer">
                {
                    list.map(v=>{
                        return <div key={v.id} className="item">
                            <div key={'0'} className="imgs" style={{background:v.children[0].color}}>
                                +{v.children.length}
                            </div>
                            {
                                v.children.slice(1,6).map((item,i)=>{
                                    return <div key={i} className="imgs" style={{background:item.color}}>{item.color}</div>
                                })
                            }
                        </div>
                    })
                }
            </div>
        </div>
    )
}

export default Home